<template>
  <div v-transfer-dom class='sure-alert'>
    <x-dialog v-model="$store.state.dialogs.sure.show">
      <div class="box">
        <div class="body">
          <p>{{$store.state.dialogs.sure.content}}</p>
        </div>
        <p class="btn"><span class="color999" @click="$store.state.dialogs.sure.show=false">取消</span><span class="color-gold" @click="save">确定</span></p>
      </div>
    </x-dialog>
  </div>
</template>
<script>
import { XDialog ,TransferDomDirective as TransferDom} from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {XDialog},
  name: "",
  data () {
    return {
    };
  },
   methods:{
     save(){
       this.$store.state.dialogs.sure.OK()
     }
  },
   created(){
  }
}
</script>
<style lang="scss" scoped>
.sure-alert{

  .box{
    padding: 10px 10px 0;

    .body{
      color: #999;
      // min-height: 60px;
      padding: 30px 0;
    }
  }
  .btn{
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #f2f2f2;
    padding: 0;
    margin-top: 5px;


    span{
      width: 50%;
      text-align: center;
    }
    span:nth-child(1){
      border-right: 1px solid #f2f2f2;
    }
    span:active{
      opacity: .6;
    }
  }
}
</style>